這是我寫給完全不會 JS 的新手的筆記。
今年五月左右，我開始學習 JS ，一開始單打獨鬥，後來有幸參加六角學院開設的 JS 學徒特訓班。非常感謝廖洧杰老師，以及時常在 slack 頻道中回答我問題的所有學長姊。雖然在程式的路上我還只是一團小肉球，常常遇到不懂的題目，希望透過這次的鐵人賽，一方面統整這幾個月學習的心得和知識，也能夠幫助到需要的人。
JavaScript 主要有兩個功能：
(1)產生網頁動畫效果
(2)跟外部伺服器要資料
但相信你之所以會在 google 搜尋 JS，對 JS 能做什麼肯定有大致的了解或根本不想了解，反正人家都說念完 HTML CSS 就要接著讀 JS。所以廢話不多說，進入 JS 這個大荒漠前，我們先來裝備一些基本知識。
像 CSS 需要寫
<link rel="stylesheet" type="text/css" href="xxx.css">
JS 也需要寫
<script src="xxx.js"></script>
好讓 HTML 跟他搭起友誼的橋樑。但有別於 CSS ， JS 這句有時不會放在 <head> 中，而是選擇放在 </body> 前，這是因為放在 <head> 中有時會吃不到效果。
不管你是要記錄錯誤，還是方便其他人知道你這一大段在衝蝦米，註解都是你的好朋友。在 JS 寫註解的方式很簡單：
//我是單行註解
/* 我是多行註解的第一行
我是多行註解的第二行
我是多行註解的第三行 */
在 HTML CSS 可能還不明顯，但到了 JS 不得不說，程式出錯的狀況大幅提升。舉凡少打一個點，錯！字拼錯，錯！大小寫寫反，錯！偏偏又沒有除蟲劑，因此善用 console.log() 就變得很重要啦！
使用方法很簡單，每寫完一些程式，就先用 console.log(); 來檢查一下跑出來的東西是否是你要的。舉個最簡單的例子：
var a = 5;
var b = 6; //寫完一些程式
console.log(a);
console.log(b); //在下面確認跑出來的，是不是你想要的(這裡會先跳出 5 再跳出 6 )
另外也可以在 Chorme 按下 F12 ，會發現跳出 console 的區塊。將你的程式貼上去，藉此檢查跑出來的內容。
當然，除錯這件事說的容易做的難，這句話你就算現在不懂也遲早會懂இдஇ
說了這麼多，現在你已經在沙漠的門口了。在今天文章的最後，我們要來介紹入場門票：變數。變數是什麼呢？
當你要跟電腦講你要請他做什麼前，要先跟它定義這個名詞是什麼，那個名詞是什麼，這時我們就會使用變數來存放資料，這個動作我們形容為"宣告"。舉例來說：
var a = 5; //宣告 a 是 5
除了數字這種型別，你也可以把它宣告成字串 String 、函式 Function 或布林值 Boolean 。
var tom = "帥哥"; //字串要用單引號或雙引號包住
var run = function(){ //宣告 run 這個變數等於後面的函式
alert("開始跑");
};
var b = true; //宣告一個東西是 true 或 false
我們來思考一下，你寫完一個精美的網頁，丟給 Chrome 以後，他是怎麼記憶(或說儲存)，你輸入的變數呢？當你寫
var a = 5;
var b = 6;
看在 Chrome 眼中，其實是這樣的：
var a; //這裡是創造階段
var b;
a = 5; //這裡是執行階段
b = 6;
為什麼要特地提到這點？因為這之中牽涉一個觀念：記憶體。在上面的範例中， Chrome 產生四個記憶體去做這件事：a、b、a=5、b=6。延伸出來的狀況是，如果我們今天拿出 console.log 來檢查，會發生什麼？
var a;
var b;
console.log(a);
a = 5;
b = 6;
console.log(a);
a 和 b 測試出來的內容是類似的，我們只測試 a 就好。你會發現，印出的兩筆資料分別是 undefined 和 5 。因為一開始只有先定義有 a 這個東西，但沒定義 a 是誰，所以你要他印出 a 是誰，他只能說 undefined 。之後定義了 a = 5 ，才會印出 5 這數字。同樣的，你可以在定義後繼續改變值，如：
var tom;
tom = 180;
tom = "帥哥";
一開始宣告 tom 這個變數，之後說他 180 ，然後又重新賦予帥哥這個值給 tom 。注意：在命名變數時，第一個字母必須是英文、底線 _ 或錢字號 $ ，第一個字母後才能放數字，如： str1。
那麼今天的文章就先到這邊！讓我們一起來練習看看，下面的程式中，有幾個變數、幾個型別、幾個記憶體？
var a;
a = 1;
a = "a字串"
a = true;
JS 學徒特訓班教學影片及練習題 1-3 關
重新認識 JavaScript: Day 03 變數與資料型別：https://ithelp.ithome.com.tw/articles/10190873
iThome鐵人賽
看影片追技術